<template>
    <div>{{value1}}</div>
    <div>
        <button @click="add">（ex4）点击我</button>
    </div>
</template>

<script>
/**
 *  在setup中使用ref来定义响应式数据
 * 
 *    在vue3中为了配合setup语法，专门写一些api在里面使用。
 *      其中一部分在setup里面实现响应式数据而写的，---响应式api
 *
 *    ref()  是一个函数，接收一个参数，返回一个响应式对象
 *     1. ref() 里面传递的参数是基本数据类型
 *     2. ref() 里面传递的参数是引用数据类型
 *     3. ref() 里面传递的参数是一个对象(对象一般用reactive)
 * 
 *  注意！！控制台上面的带下划线的数据不能动 是私有的。
 */
import { ref } from 'vue';
export default{
    //组合式api 实现响应式api
    setup(){
        //声明响应式变量
        let value1 = ref(20);
        //创建方法：  此时add方法是局部数据 需要在return出去
        const add = ()=>{
            //想要对上面的数据进行操作就需要进行 .value
            value1.value ++;
            console.log(value1.value)
        };
        //返回值
        return {
            //，目前这个value1不是响应式数据 不会在页面上面变 只能在控制台打印。
            value1,
            add
        };
    },
};


</script>

<style>


</style>